<template>

  <el-dialog title="盒脊打印" :visible.sync="hejidayinOpen" width="65%" :before-close="closeDelDialog" append-to-body>
    <el-button @click="qymldayin()" >打印</el-button>



    <el-row class="margin-tp custom-table" ref="exportPdf">
   <div class="printMe" style="margin-top: 20px">
    <div class="tablediv" style="width:600px" >
      <div style="page-break-before: avoid;"></div>
     <template v-for="(item,index) in list"  >
      <table :key="index">
        <tr><td colspan="2"></td></tr>
        <tr><td colspan="2">全宗号<br>{{item.QZH}}</td></tr>
        <tr><td colspan="2">年度<br>{{item.ND}}</td></tr>
        <tr><td colspan="2">保管期限<br>{{item.BGQX}}</td></tr>
        <tr><td colspan="2">*机构(问题)<br>{{item.FLH}}</td></tr>
        <tr >
          <td rowspan="2" style="height: 140px">起止件号</td>
          <td style="height: 70px">{{item.QJH}}</td>
        </tr>
        <tr>
          <td style="height: 70px">{{item.ZJH}}</td>
        </tr>

        <tr><td colspan="2">盒号<br>{{item.HEHAO}}</td></tr>
        <tr><td colspan="2"></td></tr>
      </table>
     </template>
    </div>
   </div>
  </el-row>
  </el-dialog>
</template>
<script>
import { qymlGetButton,getlistbytreenodeList } from "@/api/archive/fileCollection/offlinReception.js";

export default {
  props:['hejidayinOpen','daId','type','subStr','hejidata'],
  data(){
    return {
      message: 'Hello Vue!',
      list:''
    }
  },
  archive_Dicts: ['BGQX'],

  methods:{
    closeDelDialog(){
      this.$emit("closeDelDialog")
    },
    qymlpost(){

      console.log(JSON.parse(this.hejidata),"this.hejidata.data");
      this.list=JSON.parse(this.hejidata)[0].data;
      console.log(this.list,"this.list");
   },

    qymldayin() {
      const printMe = document.querySelectorAll('.printMe .tablediv');

      console.log(printMe)

      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      const iframeDoc = iframe.contentWindow.document;
      iframeDoc.open();
      iframeDoc.write(`
        <html>
        <head>
        <style>
        @page {
          size: auto;
          margin: 10mm;
        }

        @media print {
          table {
            border-collapse: collapse;
            width: 100px;
            margin-left:10px;
/*
            page-break-after: always; !* 确保每个table都在新的一页上 *!
*/
            table-layout: fixed;
            float: left;
            margin-top: 30px;
          }

          th,
          td {
            border: 1px solid #000000;
            padding: 8px;
            text-align: center;
            word-wrap: break-word;
            overflow-wrap: break-word;
            max-width: 100px;
            text-align: left;
            height:120px;
            text-align:center;
          }
        }
        </style>
        </head>
        <body>
        ${Array.from(printMe)
        .map(boxElement => boxElement.outerHTML)
        .join('')}
        <script>
          window.onload = function() {
          window.print();
          window.close();
          }
        <\/script>
        </body>
        </html>
      `);
      iframeDoc.close();
    }
  },

  created() {
    this.qymlpost();
  },

}
</script>
<style lang="scss" scoped>
.vertical-column {
  border: 1px solid #dcdcdc;
  padding: 10px;
}

.column-header {
  font-weight: bold;
  margin-bottom: 10px;
}

.column-data {
  margin-bottom: 5px;
}
table {
  border-collapse: collapse;
  width: 100px;
  margin-left: 10px;
  /*
              page-break-after: always; !* 确保每个table都在新的一页上 *!
  */
  table-layout: fixed;
  float: left;
  margin-top: 30px;
}

th,
td {
  border: 1px solid #000000;
  padding: 8px;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100px;
  text-align: left;
  height:120px;
  text-align:center;
}

::v-deep .el-dialog__body {
  padding: 0 20px 10px !important;
}

.steps-action {
  margin-top: 24px;
}

.printMain {
  display: flex;
  flex-direction: row;
}

::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}



.orderBorder {
  width: 60%;
  margin: 0px auto;
}

.orderBorder td {
  height: 42px;
  line-height: 42px;
  text-align: center;
  border: rgb(42, 41, 41) 1px solid;
}

.transbz {
  width: 60%;
  margin: 0 auto;
}

::v-deep .orderBorder input {
  border: 0 !important;
  width: 100%
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep input[type="number"] {
  -moz-appearance: textfield;
}

.transf-title {
  text-align: center;
  line-height: 55px;
  font-weight: bold;
  font-size: 28px;
}

.ymd {
  padding: 0;
  margin: 0;
  display: flex;
  width: 80%;
  text-align: right;
}

::v-deep .textNSME input {
  text-align: right !important;
}

.pinput {
  display: flex;
  flex-direction: row;
  line-height: 42px;
  align-items: center;
}

table td>div {
  width: -webkit-fill-available !important;
}
</style>
